<template>
  <div class="jiankong">
    <div class="item_list">
      <img src="../imgs/小cart.png" alt="" class="img" />
      <div>
        <h3>1号楼</h3>
        <p>设备数量: <b style="color: #2cec05;margin-left:5%;">130</b></p>
        <p>
          正常设备: <span style="color: #2cec05">107</span> 故障设备:
          <span style="color: red">23</span>
        </p>
      </div>
    </div>
    <div class="item_list">
      <img src="../imgs/小cart.png" alt="" class="img" />
      <div>
        <h3>2号楼</h3>
        <p>设备数量: <b style="color: #2cec05;margin-left:5%;">86</b></p>
        <p>
          正常设备: <span style="color: #2cec05">73</span> 故障设备:
          <span style="color: red">13</span>
        </p>
      </div>
    </div>
    <div class="item_list">
      <img src="../imgs/小cart.png" alt="" class="img" />
      <div>
        <h3>3号楼</h3>
        <p>设备数量: <b style="color: #2cec05;margin-left:5%;">138</b></p>
        <p>
          正常设备: <span style="color: #2cec05">108</span> 故障设备:
          <span style="color: red">30</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss">
.jiankong {
  width: 90%;
  height: 90%;
  margin: 1% 5%;
  overflow: hidden;
  color: #ffffff;

  .item_list {
    width: 100%;
    height: 30%;
    background: red;
    background: url("../imgs/小border.png") no-repeat;
    background-size: 100% 100%;
    margin: 2% 0%;
    display: flex;
    .img {
      width: 133px;
      height: 74px;
      margin: 1%;
    }
    div {
      line-height: 22px;
      margin: 2% 5%;
    }
  }
}
</style>
